<template>
  <div id="map"></div>
</template>

<script>

import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import L from "leaflet";
import {wktToGeoJSON} from "@terraformer/wkt"

export default {
  name: "ex2",
  data() {
    return {
      map: null
    }
  },
  mounted() {

    // 地图初始化
    this.initMap()
  }, methods: {
    // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
    initMap() {
      let map = L.map("map", {
        center: [28.649164, 120.085269], // 中心位置
        zoom: 12, // 缩放等级
        attributionControl: true, // 版权控件
        zoomControl: true //缩放控件
      });
      this.map = map; // data上需要挂载
      L.tileLayer(
          "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
      ).addTo(map) // 加载底图

      map.pm.addControls({
        position: 'topleft',
        drawCircle: false,
      });

      var mypop = L.popup();
      map.on('click', function (e) {
        var content = '你临幸了这个点：<br>';
        content += e.latlng.toString();
        mypop.setLatLng(e.latlng)
            .setContent(content)
            .openOn(map);
      });


      var wkts =
          "MULTIPOLYGON(((120.085269 28.649164,120.085253 28.649084,120.085163 28.648951,120.085102 28.648769,120.085045 28.648731,120.084968 28.648594,120.084856 28.648572,120.084715 28.648479,120.084664 28.648354,120.084562 28.648223,120.084369 28.648124,120.083847 28.648114,120.083832 28.648128,120.083837 28.648131,120.083955 28.648185,120.084028 28.648273,120.083906 28.648356,120.083970 28.648470,120.083852 28.648533,120.083795 28.648448,120.083770 28.648456,120.083753 28.648451,120.083644 28.648470,120.083652 28.648498,120.083689 28.648616,120.083711 28.648688,120.083725 28.648748,120.083734 28.648789,120.083477 28.648810,120.083301 28.648818,120.083068 28.648828,120.083029 28.648829,120.082960 28.648832,120.082905 28.648845,120.082834 28.648861,120.082824 28.648816,120.082818 28.648790,120.082805 28.648732,120.082796 28.648691,120.082785 28.648651," +
          "120.082482 28.648706,120.082440 28.648717,120.082409 28.648726,120.082441 28.648700,120.082448 28.648693,120.082458 28.648673,120.082464 28.648645,120.082490 28.648528,120.082526 28.648314,120.082551 28.648348,120.082586 28.648364,120.082665 28.648367,120.082723 28.648346,120.082742 28.648320,120.082739 28.648270,120.082728 28.648208,120.082651 28.648109,120.082613 28.648078,120.082577 28.648067,120.082584 28.648034,120.082589 28.647988,120.082591 28.647928,120.082541 28.647719,120.082483 28.647473,120.082451 28.647331,120.082417 28.647230,120.082379 28.647108,120.082361 28.647059,120.082320 28.646966,120.082291 28.646917,120.082344 28.646892,120.082386 28.646956,120.082483 28.647031,120.082536 28.647215,120.082531 28.647298,120.082576 28.647349,120.082630 28.647462,120.082650 28.647455,120.082676 28.647530,120.082687 28.647559,120.082657 28.647567,120.082661 28.647587,120.082666 28.647598,120.082710 28.647678,120.082799 28.647746,120.082663 28.647839,120.082676 28.647879,120.082736 28.648032,120.082823 28.647997,120.082865 28.648047,120.082962 28.648019,120.082983 28.648077,120.083137 28.648043,120.083235 28.647980,120.083186 28.647884,120.083259 28.647833,120.083129 28.647613,120.083110 28.647570,120.083038 28.647445,120.083049 28.647430,120.083164 28.647361,120.083085 28.647197,120.082987 28.646981,120.082893 28.646778,120.082794 28.646577,120.082690 28.646378,120.082580 28.646181," +
          "120.082465 28.645987,120.082344 28.645795,120.082219 28.645606,120.082157 28.645466,120.082103 28.645324,120.082055 28.645179,120.082021 28.645054,120.081687 28.645610,120.081660 28.645626,120.081627 28.645347,120.081616 28.645261,120.081977 28.644767,120.081948 28.644658,120.081945 28.644625,120.081937 28.644493,120.081931 28.644440,120.081918 28.644387,120.081898 28.644336,120.081871 28.644288,120.081837 28.644243,120.081798 28.644202,120.081735 28.644140,120.081678 28.644074,120.081628 28.644003,120.081025 28.644394,120.081369 28.644749,120.081483 28.644902,120.081505 28.644895,120.081532 28.644932,120.081552 28.644974,120.081562 28.645036,120.081574 28.645291,120.081565 28.645292,120.081574 28.645346,120.081567 28.645471,120.081449 28.645606,120.080899 28.645607,120.080780 28.645781,120.080836 28.646010,120.081146 28.646724,120.081443 28.647407,120.081438 28.647569,120.081492 28.647710,120.081535 28.647876,120.081554 28.647990,120.081594 28.648162,120.081663 28.648296,120.080852 28.648729,120.080887 28.648788,120.080929 28.648820,120.080995 28.648848,120.081115 28.648848,120.081253 28.648830,120.081418 28.648780,120.081558 28.648744,120.081798 28.648666,120.081940 28.648662,120.082151 28.648622,120.082251 28.648612,120.082248 28.648589,120.082246 28.648578,120.082252 28.648499,120.082289 28.648498,120.082289 28.648416,120.082223 28.648416,120.081949 28.648422,120.081944 28.648338,120.081877 28.648338,120.081866 28.648304,120.081754 28.648320,120.081735 28.648163,120.081844 28.648162,120.081974 28.648142,120.081820 28.647991,120.081863 28.647948,120.081944 28.647876,120.082054 28.647988,120.082208 28.647911,120.082059 28.647746,120.082052 28.647738,120.082197 28.647641,120.082169 28.647428,120.082328 28.647411,120.082316 28.647317,120.082398 28.647291,120.082409 28.647324,120.082439 28.647419,120.082505 28.647611,120.082515 28.647663,120.082531 28.647818,120.082539 28.647907,120.082543 28.647979,120.082530 28.648029,120.082519 28.648076,120.082493 28.648229,120.082483 28.648332,120.082463 28.648421,120.082446 28.648526,120.082443 28.648557,120.082431 28.648618,120.082416 28.648644,120.082401 28.648672,120.082377 28.648694,120.082398 28.648712,120.082400 28.648714,120.082405 28.648723,120.082407 28.648723,120.082448 28.648805,120.082409 28.648868,120.082398 28.648885,120.082341 28.648965,120.082280 28.649038,120.082211 28.649110,120.082157 28.649160,120.082157 28.649160,120.082158 28.649160,120.083061 28.650098,120.082998 28.650129,120.082988 28.650134,120.083286 28.650030,120.083396 28.649992,120.083416 28.649986,120.083466 28.649970,120.083515 28.649952,120.083520 28.649950,120.083590 28.649921,120.083798 28.649838,120.084195 28.649677,120.084541 28.649538,120.085076 28.649321,120.085310 28.649227,120.085317 28.649224,120.085269 28.649164)," +
          "(120.081877 28.646618,120.081860 28.646586,120.081848 28.646589,120.081822 28.646598,120.081790 28.646534,120.081810 28.646525,120.081840 28.646512,120.081952 28.646466,120.081978 28.646531,120.081997 28.646572,120.081877 28.646618)," +
          "(120.081652 28.645896,120.081696 28.645879,120.081708 28.645908,120.081708 28.645909,120.081752 28.646003,120.081779 28.646045,120.081798 28.646074,120.081826 28.646113,120.081836 28.646128,120.081882 28.646187,120.081914 28.646245,120.081926 28.646284,120.081931 28.646303,120.081874 28.646311,120.081640 28.646281,120.081642 28.646258,120.081648 28.646180,120.081650 28.646156,120.081645 28.646052,120.081627 28.645957,120.081652 28.645896)))"
      ;
      var geojsons = wktToGeoJSON(wkts);

      L.geoJson(geojsons).addTo(map);

    }
  }
}
</script>

<style scoped>

</style>